<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)-->
        <script src="js/jquery-1.12.4.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.js"></script>
        <!-- jar包，没有空格版 -->
        <!-- <script src="js/bootstrap.min.js"></script>-->
        <link rel="stylesheet" href="css/css.css">
        <style>
            td{
                text-align: left;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 style="color:#696969">添加元宇宙商品</h1>
            <form id="formData" onsubmit="return false">
                <table border="1" width="100%" cellspacing="0" cellpadding="0" class="table table-striped table-bordered table-hover table-condensed text-center">
                    <tr>
                        <td>商品名称</td>
                        <td><input id="productName" type="text" name="productName"></td>
                    </tr>
                    <tr>
                        <td>商品描述</td>
                        <td><textarea id="productDesc" cols="50" rows="12" name="productDesc"></textarea></td>
                    </tr>
                    <tr>
                        <td>商品价格</td>
                        <td><input id="productPrice" type="number" name="productPrice"></td>
                    </tr>
                    <tr>
                        <td>商品状态</td>
                        <td>
                            <input type="radio" name="flag" checked>上架
                            <input type="radio" name="flag" >下架
                        </td>
                    </tr>
                    <tr>
                        <td>操作</td>
                        <td>
                            <input id = "add" type="submit" value="新增" class="btn btn-default">
                            <input type="reset" value="重置" class="btn btn-default">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>
<script>

    //获取奇数行和偶数行
    $('tr:odd').addClass("warning")
    $('tr:even').addClass("info")

    //获取提交按钮添加点击事件
    $('#add').click(function () {
        //验证所有输入框的内容不能为空
        let productName = $("#productName").val();
        let productDesc = $("#productDesc").val();
        let productPrice = $("#productPrice").val();
        if (productName == ''|| productName == null) {
            alert("商品名称为空")
            return;
        }
        if (productDesc == ''|| productDesc == null) {
            alert("商品描述为空")
            return;
        }
        if (productPrice == ''|| productPrice == null) {
            alert("商品价格为空")
            return;
        }

        //获取表单中所有的数据
        let formData = $('#formData').serialize();
        console.log(formData)
        //发送异步请求
        $.post("add",formData,function (result) {
            if (result.flag){
                if (result.data == 'success'){
                    alert("新增成功")
                    //回到主页
                    location.href = 'index.html'
                }else {
                    alert("新增失败")
                }
            }else {
                alert("服务器出现异常")
            }
        },'json')
    })
</script>